<style scoped lang="less">
    @import "MyMessage";
</style>
<template>
    <div class="my-message">
        <main>
            <header-title :title="'我的消息'"></header-title>
            <div class="content">
                <ul class="tab-list">
                    <li
                            class="tab-item"
                            :class="(currentTabName==='tab01'?'active':'')"
                            :key="'tab01'"
                            @click="currentTabName='tab01'"
                    >未读（0）</li>
                    <li
                            class="tab-item"
                            :class="(currentTabName==='tab02'?'active':'')"
                            :key="'tab02'"
                            @click="currentTabName='tab02'"
                    >已读（0）</li>
                </ul>
                <ul class="messages-list">
                    <li class="messages-item" v-for="(item, index) in messagesList" :key="index+'mes'">
                        <el-checkbox class="check" v-model="item.checked" @change="checkItem"></el-checkbox>
                        <dl class="mes-content">
                            {{item.content}}
                            <dt><p>{{item.remarks}}</p></dt>
                        </dl>
                        <div class="delete fr">
                            <div class="icon-delete"><i class="el-icon-delete btn"></i></div>
                            <div class="update-time"><i class="el-icon-time" style="margin-right: 7px"></i>2019-04-25</div>
                        </div>
                    </li>
                    <li class="messages-item">
                        <el-checkbox style="margin-right: 11px" v-model="checkedAll" @change="checkAll">
                            全选
                        </el-checkbox>
                        <span class="link batch-delete">删除所选</span>
                    </li>
                </ul>
            </div>
            <div class="footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="200">
                </el-pagination>
            </div>
        </main>
    </div>
</template>

<script>
    import EnterpriseAside from '@/pages/enterprise-center/components/EnterpriseAside.vue'
    import HeaderTitle from '@/pages/enterprise-center/components/HeaderTitle.vue'

    export default {
        name: "MyMessage",
        components: {
            EnterpriseAside,
            HeaderTitle
        },
        data() {
            return {
                checkedAll: false,
                currentTabName: 'tab01',
                checkList: [],
                messagesList: [
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },
                    {
                        content: '易夫子教师人才网正式上线！！',
                        remarks: '易夫子教师人才网正式上线，欢迎各类教师及学校使用。',
                        checked: false
                    },

                ]
            }
        },
        methods: {
            checkAll() {
                this.messagesList.forEach(item => {
                    item.checked = this.checkedAll;
                })
            },
            checkItem() {
                this.checkedAll = this.messagesList.every(item=>{return item.checked})
            }
        }
    }
</script>

